<script setup>
import {reactive, ref} from 'vue'
import useUserStore from '@/store/user'
import {black} from '@/common/css/public/base.module.scss'
import {notificationMess} from '@/utils/message'

//定义account数据
const form = reactive({
  account: '',
  password: ''
})

//登录事件
const userStore = useUserStore()
const handleClick = () => {
  const {account, password} = form
  if (!account || !password) return notificationMess.error('请输入账号密码')

  //登录
  userStore.fetchLoginAction(form)
}
</script>

<template>
  <div class="login-form">
    <h2>登录漠阳优选</h2>
    <el-form :model="form">
      <el-form-item>
        <el-input prefix-icon="User" v-model="form.account" @keydown.enter="handleClick" placeholder="请输入账号"/>
      </el-form-item>
      <el-form-item>
        <el-input prefix-icon="Lock" v-model="form.password" @keydown.enter="handleClick" show-password
                  placeholder="请输入密码"/>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" :color="black" @click="handleClick">
          登 录
        </el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<style lang="scss" scoped>
.login-form {
  width: 350px;
  @include grid-box(false, true);
  gap: $spacing-2;
}

.el-form-item {
  margin: 30px 0;
}

.el-button {
  width: 100%;
}
</style>
